<!DOCTYPE html>
<html>
<head>
    <title>{{ table_name }} 表管理</title>
    <link href="/Style/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/Style/css/bootstrap-icons.css">
    <style>
        body {
            padding: 2rem;
            background-color: #f8f9fa;
        }
        .table-responsive {
            max-height: 70vh;
            overflow-y: auto;
        }
        .action-btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1><i class="bi bi-table me-2"></i>{{ table_name }} 表管理</h1>
            <div>
                <a href="{{ url_for('sqlmanager_bp.index_sql_page') }}" class="btn btn-outline-secondary me-2">
                    <i class="bi bi-arrow-left me-1"></i> 返回表列表
                </a>
                <a href="{{ url_for('sqlmanager_bp.add_record', table_name=table_name) }}" class="btn btn-success">
                    <i class="bi bi-plus-circle me-1"></i> 添加记录
                </a>
            </div>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-light sticky-top">
                            <tr>
                                {% for field in structure %}
                                <th>
                                    {{ field.name }}
                                    {% if field.is_primary %}
                                        <span class="badge bg-primary ms-1">主键</span>
                                    {% endif %}
                                    <small class="d-block text-muted">{{ field.type }}</small>
                                </th>
                                {% endfor %}
                                <th style="min-width: 120px;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for record in records %}
                            <tr>
                                {% for field in structure %}
                                <td>
                                    <!-- 修复：使用Jinja2的属性访问方式替代getattr -->
                                    {{ record[field.name] or '' }}
                                </td>
                                {% endfor %}
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <!-- 修复：使用Jinja2的属性访问方式替代getattr -->
                                        <a href="{{ url_for('sqlmanager_bp.edit_record', table_name=table_name, record_id=record[pk_column]) }}"
                                           class="btn btn-outline-primary action-btn">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        <button type="button" class="btn btn-outline-danger action-btn"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteModal" data-record-id="{{ record[pk_column] }}">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="{{ structure|length + 1 }}" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="bi bi-info-circle me-2"></i>该表中没有记录
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-exclamation-triangle text-warning me-2"></i>确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这条记录吗？此操作无法撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <form id="deleteForm" method="post">
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

     <script src="/Style/js/bootstrap.bundle.min.js"></script>
    <script>
        // 配置删除模态框
        const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        const deleteForm = document.getElementById('deleteForm');

        document.addEventListener('click', function(e) {
            if (e.target.closest('[data-bs-target="#deleteModal"]')) {
                const btn = e.target.closest('[data-bs-target="#deleteModal"]');
                const recordId = btn.getAttribute('data-record-id');
                deleteForm.action = "{{ url_for('sqlmanager_bp.delete_record_route', table_name=table_name, record_id='') }}" + recordId;
            }
        });
    </script>
</body>
</html>